<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="echarts.js"></script>
        <!-- 引入适配移动端的meta配置 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    </head>
    <body>
        <div id="main" style="width: 100%; height: 182px"></div>
        <script type="text/javascript">
            // 初始化图表实例
            var myChart = echarts.init(document.getElementById("main"));
            var option = {
                // title: { text: "动态数据展示" },
                tooltip: {},
                //  legend: { data: ["销量"] },
                xAxis: {
                    data: [], // 初始为空，由iOS传入
                    type: "category",
                    boundaryGap: true, // 留白避免柱子贴边
                    axisLabel:{
                        formatter: function(value) {
                            // 按每4个字符拆分（保持原拆分逻辑）
                            const chars = value.match(/.{1,4}/g) || [value];
                            // 最多显示3行，超出部分用省略号代替
                            if (chars.length > 2) {
                                // 取前3行并在最后添加省略号
                                return [...chars.slice(0, 2), '...'].join('\n');
                            }
                            // 不超过3行则直接拼接
                            return chars.join('\n');
                            
                        }
                    }
                },
                yAxis: {},
                dataZoom: [
                           {
                               type: "inside", startValue: 0, endValue: 2,// 允许水平方向滑动（核心）
                               orient: "horizontal",
                               // 禁止垂直方向缩放（只关注左右滑动）
                               zoomLock: true,
                               // 启用触摸滑动（移动端关键）
                               moveOnTouch: true,
                               // 禁用鼠标滚轮（移动端不需要）
                               moveOnMouseWheel: false
                           }
                           ],
                           grid: {
                               top:'10%',
                               left: '2%',
                               right: '1%',
                               bottom: '1%',
                               containLabel: true
                           },
                           series: [{
                               //    name: "销量",
                               type: "bar",
                               barWidth: 15,
                               data: [], // 初始为空，由iOS传入
                               itemStyle: {
                                   color: {
                                       type: "linear",
                                       x: 0, y: 0, x2: 0, y2: 1,
                                       colorStops: [
                                                    { offset: 0, color: "#007AFF" },
                                                    { offset: 1, color: "rgba(0, 122, 255, 0.3)" }
                                                    ]
                                   }
                               },
                               label: { show: true, position: "top" }
                           }]
            };
            myChart.setOption(option);
            
            // 定义供iOS调用的方法：更新图表数据
            function updateChart(xData, yData) {
                // 验证数据格式（确保是数组）
                if (!Array.isArray(xData) || !Array.isArray(yData)) {
                    console.error("数据格式错误，需传入数组");
                    return;
                }
                
                // 更新x轴和系列数据
                option.xAxis.data = xData;
                option.series[0].data = yData;
                // 重新渲染图表
                myChart.setOption(option);
            }
            /**
             * @description: 等比例放大
             * @return {*}
             */
            function bodyScale() {
                
                
                
                var devicewidth = document.documentElement.clientWidth;
                var scale = devicewidth / 324; // 分母——设计稿的尺寸宽度
                // document.body.style.zoom = scale-0.07113;
                //页面尺寸放大
                document.body.style.zoom = scale;
                //解决zoom放大缩小导致echarts位置偏移问题
                let strScale = `scale(${scale})`
                var obj = {
                    zoom: 1 / scale,
                    transform: strScale,
                    transformOrigin: "0 0",
                    
                }
                
                insertCss("canvas", obj);
                
                
            }
            
            function insertCss(select, styles) {
                console.log(styles);
                if (document.styleSheets.length === 0) { //如果没有style标签,则创建一个style标签
                    var style = document.createElement("style");
                    document.head.appendChild(style);
                }
                var styleSheet = document.styleSheets[document.styleSheets.length - 1]; //如果有style 标签.则插入到最后一个style标签中
                var str = select + " {"; //插入的内容必须是字符串,所以得把obj转化为字符串
                for (var prop in styles) {
                    str += prop.replace(/([A-Z])/g, function (item) { //使用正则把大写字母替换成 '-小写字母'
                        return "-" + item.toLowerCase();
                    }) + ":" + styles[prop] + ";"
                }
                str += "}";
                styleSheet.insertRule(str, styleSheet.cssRules.length); //插入样式到最后一个style标签中的最后面
            }
            
            
            
            window.onload = window.onresize = function () {
               // bodyScale();
            };
        </script>
        <style>
            html,
            body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                overflow: hidden; /* 禁止页面整体滚动 */
            }
        </style>
    </body>
</html>
